<template>
  <div class="global-confirm">
    <v-dialog
      v-for="item in confirmItems"
      :key="item.id"
      :model-value="true"
      max-width="400px"
      persistent
    >
      <v-card class="rounded-xl">
        <v-card-title class="d-flex align-center">
          <v-icon 
            :icon="getIcon(item.type)" 
            :color="getIconColor(item.type)" 
            class="mr-3"
            size="24"
          ></v-icon>
          <span>{{ item.title }}</span>
        </v-card-title>
        
        <v-card-text class="py-4">
          <div class="text-body-1">{{ item.message }}</div>
        </v-card-text>

        <v-card-actions class="px-6 pb-4">
          <v-spacer></v-spacer>
          <v-btn 
            variant="outlined" 
            @click="handleCancel(item.id)"
            :disabled="item.loading"
          >
            {{ item.cancelText }}
          </v-btn>
          <v-btn 
            :color="getConfirmColor(item.type)" 
            @click="handleConfirm(item.id)"
            :loading="item.loading"
          >
            {{ item.confirmText }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { confirmManager } from '@/utils/confirm';

// 获取所有确认对话框
const confirmItems = computed(() => confirmManager.getItems());

// 根据类型获取图标
const getIcon = (type) => {
  const iconMap = {
    warning: 'mdi-alert',
    error: 'mdi-alert-circle',
    info: 'mdi-information',
    success: 'mdi-check-circle'
  };
  return iconMap[type] || iconMap.warning;
};

// 根据类型获取图标颜色
const getIconColor = (type) => {
  const colorMap = {
    warning: 'warning',
    error: 'error',
    info: 'info',
    success: 'success'
  };
  return colorMap[type] || colorMap.warning;
};

// 根据类型获取确认按钮颜色
const getConfirmColor = (type) => {
  const colorMap = {
    warning: 'warning',
    error: 'error',
    info: 'primary',
    success: 'success'
  };
  return colorMap[type] || colorMap.warning;
};

// 处理确认
const handleConfirm = (id) => {
  confirmManager.handleConfirm(id);
};

// 处理取消
const handleCancel = (id) => {
  confirmManager.handleCancel(id);
};
</script>

<style scoped>
.global-confirm {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

.v-dialog {
  pointer-events: auto;
}

.v-card-title {
  font-weight: 600;
}
</style> 